<template>
	<view class="wrap" style="padding-bottom: 50rpx;">
		<!-- @scrolltolower:滚动到底部触发  lower-threshold：距离底部多少距离触发@scrolltolower -->
		<scroll-view style=" margin: 0 auto ; width: 95%;border: 1px solid #ccc;" class="scroll-view_H" scroll-x="true"  @scrolltolower='scrollBottom'
			:lower-threshold='2'>
			<view class="top" id="top" :style="{width:tableWidths+'px'}">
				<view v-for="(h,n) in header" :key='n' :class="{'header_dyg':true,'flexs':h.flxe}" style="font-size: 30rpx;"
					:style="{width:n==0?'350rpx' : h.hWidth + 'px' }">
					{{h.name}}
				</view>
			</view>
			<view class="bottom" :style="{width:tableWidths+'px'}" >
				<view  class="tablebox"  v-for="(t,s) in tableData" :key='s'  v-if="t.IsShow==1" >
					<view v-for="(h,n) in header" :key="n"
						:class="{'table_dyg':true,  'tdColClass':h.bgcolor,  'tdRowClass':t.bgcolor,  'flexs':h.flxe,  'recomActive' : t.E_Brand ==='推荐值'}"
						:style="{ width: n == 0 ? '350rpx' : h.hWidth + 'px' }">
						<!-- 不等于操作列就显示文字 -->
						<text v-if="h.key==='E_Brand' && t.E_Brand !=='推荐值'" :style="{color:getColor(t,h)}" style="color: black;" >{{t.E_Brand+'-'+t.E_Series}}</text>
						<text v-if="h.key!=='edit' && !(h.key === 'E_Brand' && t.E_Brand !== '推荐值')" :style="{color:getColor(t,h)}" style="color: black;" >{{t[h.key]}}</text>
						<!-- 操作列显示按钮，后期用插槽 -->
						<view v-if="t.E_Brand !=='推荐值'" class="uni-group" v-else style="background-color: #fff;">
						<!-- 	<button class="uni-button" size="mini" type="primary" style="margin-right: 5px;"
								@click="editTable(t)">编辑</button> -->
								<!-- @click="deleteTable(t, s)" -->
						<!-- <button v-if="h.key ==='edit'"  style="font-size: 28rpx;padding: 0 15rpx;margin-top: 12rpx;" size="mini" type="warn" @click="jumpDetailed(t,s)">移出计算</button> -->
							<!-- <uni-icons type="clear" color='#D1100B' size="30" @click="jumpDetailed(t,s)"></uni-icons> -->
							<uni-icons type="trash" size="22" color="red" @click="jumpDetailed(t, s)"></uni-icons>
							<!-- <image  v-if="h.key ==='edit'"  :src="image" mode="" style="width: 70rpx;height: 70rpx; margin-top: 8rpx;" @click="jumpDetailed(t,s)"></image> -->
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	// 表头配置：flxe(固定列)，bgcolor(列底纹)
	// 表体配置：bgcolor(行底纹)
	export default {
		props: {
			data2: {
				type: Array,
				required: true,
				default: function() {
					return [];
				}
			},
			head: {
				type: Array,
				required: true,
				default: function() {
					return [];
				}
			},
			tableHeight: {
				required: true,
				type: [Number, String],
				default: function() {
					return 0;
				}
			}
		},
		data() {
			return {
				image:require('../icons/delete.png'),
				//表体
				tableData: [],
				//表头
				header: [],
				// 表格总长度
				tableWidths:0
			}
		},
		watch:{
			// 监听列表
			'data2'(a,b){
				this.tableData = a
			},
			// 监听表头
			'head'(a,b){
				this.header = a
				//计算列宽
				this.tableWidth()
			},
		},
		created() {
			this.tableData = this.data2 //列表
			this.header = this.head //表头
			this.tableWidth()
		},
		methods: {
			// 返回行数据
			jumpDetailed(row,s){
				console.log('删除按钮', row, s)
				this.$emit('rowData',row,s)
			},
			// 滚动到底部，调用父组件方法
			scrollBottom(e) {
				// 滚动到底部才触发，滚动到右边不触发
				if (e.detail.direction == "bottom") {
					this.$emit('scrollBottom')
				}
			},
			// 颜色对比
			getColor(row, col) {
				let color = 'black'
				// 传值给父组件，通过父组件的方法内计算判断当前单元格数据是否需要标红，然后通过回调函数，返回一个color值来渲染
				this.$emit('getTextColor', row, col, val => {
					color = val
				})
				return color
			},
			// 修改按钮
			editTable(val) {
				this.$emit('getEdit', val)
			},
			// 删除按钮
			deleteTable(val, index) {
				console.log('删除按钮', val)
				this.$emit('getDelete', val, index)
			},
			// 计算单元格宽度
			tableWidth() {
				let w=0 //计算表格长度
				this.header.forEach((head, index) => {
					let hw = head.name.length //表头单元格宽度
					let dw = 0 //列表单元格宽度
					this.tableData.forEach(data => {
						// 如果是操作列，就直接给十个字符长度，也就是列宽自动150，不是操作列的统一看字符串长度决定宽度
						let a = (head.key == 'edit' ? '1234567891' : (data[head.key]?data[head.key].toString():'1'))
						let tw = (head.key == 'edit' ? 0 : a.length)
						// 这里每次循环找出更大的数赋值，确保dw中是表体单元格这一列中最大宽度，根据最大宽度来判断单元格显示
						if (dw < tw) {
							dw = tw
						}
					})
					// 表体单元格内容宽度小于表头内容时，以表头的宽度为主。根据表头的字符长度来区分宽度
					if (dw <= hw) {
						if (hw <= 3) {
							head['hWidth'] = 70
						} else if (hw <= 5) {
							head['hWidth'] = 80
						} else {
							head['hWidth'] = 130
						}
					} else {
						// 表体内容宽度大于表头内容宽度时，以表体宽度为主。根据表头的字符长度来区分宽度
						if (dw <= 3) {
							head['hWidth'] = 70
						} else if (dw <= 5) {
							head['hWidth'] = 80
						} else {
							head['hWidth'] = 130
						}
					}
					w+=head['hWidth'] //叠加表格总长度
				})
				this.tableWidths=w   //给表格赋值总长度
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		width: 100%;
	}
  .recomActive{
		background-color: #EA7500  !important;
	}
	// 表头
	.top {
		display: flex;
		position: sticky; //表头向上滚动时固定住
		top: 0;
		//width: 750px; //左右滚动时不会把固定的表头滚动走
		z-index: 90; //滑动时表头不被覆盖
		.header_dyg {
			height: 40px;
			text-align: center;
			line-height: 40px;
			// border-top: 1px solid #ccc;
			border-right: 1px solid #ccc;
			border-bottom: 1px solid #ccc;
			padding: 0 5px;
			background-color: #f5f5f6;
			font-size: 14px;
			font-weight: bold;
			color: #2b2b2b;
			flex-shrink: 0;
		}

		// 列定位固定单元格
		.flexs {
			position: sticky;
			left: 0;
			background-color: #f5f5f6;
			z-index: 10;
		}
	}

	// 表格列表
	.bottom {
		//width: 750px;
	
		.tablebox {
			display: flex;
			font-size: 14px;

			.table_dyg {
				height: 40px;
				text-align: center;
				line-height: 40px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				border-right: 1px solid #ccc;
				border-bottom: 1px solid #ccc;
				padding: 0 5px;
				flex-shrink: 0;
			}

			// 列定位固定单元格
			.flexs {
				position: sticky;
				left: 0;
				background-color: #fff;
				z-index: 10;
			}
		}
	}

	// 列的颜色
	.tdColClass {
		// background-color: #d9edf7;
	}

	// 行的颜色
	.tdRowClass {
		// background-color: #afdfe4;
	}
</style>


